<template>
  <div class="背景">
    <div class="页眉">
    </div>
    <!--分栏-->
    <el-row :gutter="16" type="flex" justify="center">
      <!--菜单栏-->
      <el-col :span="4">
        <div class="文本框" style="height: 900px;">
          <el-menu  router>
            <el-menu-item index="/CreationCenter" >
              <div class="文本">
                <i class="el-icon-menu"></i>
                首页
              </div>
            </el-menu-item>
            <el-submenu index="001">
              <template slot="title">
                <div class="文本">
                  <i class="el-icon-edit-outline"></i>
                  创作
                </div>
              </template>
              <el-menu-item index="/CreationCenter/SendArticle">发布文章</el-menu-item>
              <el-menu-item index="/CreationCenter/SendVideo">发布视频</el-menu-item>
              <el-menu-item index="/CreationCenter/SendReport">发布研报</el-menu-item>
              <el-menu-item index="/CreationCenter/SendTinyArticle">发布富微条</el-menu-item>
            </el-submenu>
            <el-menu-item index="/CreationCenter/ManageArticle">
              <div class="文本">
                <i class="el-icon-reading"></i>
                作品管理
              </div>
            </el-menu-item>
            <el-submenu index="002">
              <template slot="title">
                <div class="文本">
                  <i class="el-icon-view"></i>
                  互动管理
                </div>
              </template>
              <el-menu-item index="/CreationCenter/ManageFollow">关注管理</el-menu-item>
              <el-menu-item index="/CreationCenter/ManageComment">评论管理</el-menu-item>
              <el-menu-item index="/CreationCenter/ManagePM">私信管理</el-menu-item>
            </el-submenu>
            <el-submenu index="003">
              <template slot="title">
                <div class="文本">
                  <i class="el-icon-document"></i>
                  数据分析
                </div>
              </template>
              <el-menu-item index="/CreationCenter/DataArticle">作品数据</el-menu-item>
              <el-menu-item index="/CreationCenter/DataFans">粉丝数据</el-menu-item>
              <el-menu-item index="/CreationCenter/DataProfit">收益数据</el-menu-item>
            </el-submenu>
            <el-menu-item index="/CreationCenter/Option">
              <div class="文本">
                <i class="el-icon-setting"></i>
                设置
              </div>
            </el-menu-item>
          </el-menu>
        </div>
      </el-col>
      <!--正文栏-->
      <el-col :span="14">
        <!--个人数据-->
        <div class="文本框">

          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/CreationCenter' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>评论管理</el-breadcrumb-item>
          </el-breadcrumb>
          <br/>


          <el-select v-model="defaultOption" placeholder="请选择排序方式">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>


          <div style="margin-bottom: 8px"> </div>
          <el-table
              :data="commentTable"
              style="width: 100%"
              :show-header="false">
            <el-table-column
                label="用户"
                width="50">
              <template slot-scope="scope">
                <el-avatar shape="square" :size="40" :src="scope.row.url"></el-avatar>
              </template>
            </el-table-column>
            <el-table-column
                width="600">
              <template slot-scope="scope">
                <div class="文本">
                  {{scope.row.name}}
                </div>
                <div class="文本-小">
                  {{scope.row.comment}}
                </div>
              </template>
            </el-table-column>
            <el-table-column
                prop="time"
                width="300"
                fixed="right"
                align="right">
              <template slot-scope="scope">
                <div class="文本-小 右侧">
                  {{scope.row.time}}
                </div>
                <el-button type="text" @click="dialogVisible_1 = true">回复</el-button>
                <el-button type="text" @click="dialogVisible_2 = true">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <br/>
          <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :current-page="current"
              :page-size="pageSize"

          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <div class="页眉">
    </div>

    <el-dialog
        title="回复评论"
        :visible.sync="dialogVisible_1"
        width="30%"
        :before-close="handleClose">
      <div class="文本" style="padding-bottom: 10px">回复 用户 的评论</div>
      <el-input
          type="textarea"
          :rows="5"
          placeholder=""
          border="0"
          v-model="reply"
          maxlength="200"
          show-word-limit>
      </el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible_1 = false">取消</el-button>
    <el-button type="primary" @click="dialogVisible_1 = false">回复</el-button>
  </span>
    </el-dialog>

    <el-dialog
        title="提示"
        :visible.sync="dialogVisible_2"
        width="30%"
        :before-close="handleClose">
      <span>您确定要删除此条评论？</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible_2 = false">取消</el-button>
    <el-button type="primary" @click="dialogVisible_2 = false">确定</el-button>
  </span>
    </el-dialog>



  </div>
</template>
<style>
.el-textarea__inner {
  border-radius: 0px;
  font-size: 16px;
  resize: none;
}
</style>


<script>
export default {
  data() {
    return {
      total: 100,
      pageSize: 10,
      current: 3,
      file_num :4,
      commentTable: [{
        name: '用户',
        like: '111',
        comment: '嘿嘿，嘿嘿！',
        top: '0',
        url: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
        time: '2021/2/31'
      }, {
        name: '用户',
        like: '111',
        comment: '嘿嘿，嘿嘿！',
        top: '1',
        url: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
        time: '2021/2/31'
      }, {
        name: '用户',
        like: '111',
        comment: '嘿嘿，嘿嘿！',
        top: '0',
        url: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
        time: '2021/2/31'
      }, {
        name: '用户',
        like: '111',
        comment: '嘿嘿，嘿嘿！',
        top: '0',
        url: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
        time: '2021/2/31'
      }],
      dialogVisible_1: false,
      dialogVisible_2: false,
      reply: '',
      options: [{
        value: '001',
        label: '按时间排序'
      }, {
        value: '002',
        label: '按点赞排序'
      }],
      defaultOption: '001'
    }
  }
};
</script>